<template>
  <div>
    <!-- <el-row>
      <el-col :span="22">
        <div class="sec-title">试卷模板管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button @click="saveBefore" type="text">新增</el-button>
        </div>
      </el-col>
    </el-row> -->
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="题库名称">
        <el-input
          v-model="queryParams.bankName"
          placeholder="题库名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="题库类型">
        <el-select v-model="queryParams.bankType" placeholder="题库类型">
            <el-option v-for="(item, index) in bankTypes" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchBanks"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="banks"
      height="590"
      @row-click="callbackSelectTemplate"
    >
      <el-table-column
        prop="bankId"
        label="题库编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="bankName"
        label="题库名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="bankType"
        label="题库类型"
        width="170"
      >
      <template slot-scope="scope">
        {{ parseBankType(scope.row)}}
      </template>
      </el-table-column>
      <el-table-column
        prop="bankDesc"
        label="题库描述"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="bankProblems"
        label="题目总数"
        width="170"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { queryBanks, getConfig, parseConfig } from '@/api/system/system.js'
export default {
  data() {
    return {
      current: 1,
      pageSize: 10,
      total: 0,
      banks: [],
      bankTypes: [],
       queryParams: {
          bankName: '',
          bankType: '',
          current: 1,
          pageSize: 10
        }
    }
  },
  async mounted() {
    const {data: res} = await getConfig({codeType: 'BANK_TYPE', codeValue: ''})
    if (res.code === 200) {
        this.bankTypes = res.data.cache
    }
    this.searchBanks()
  },
  computed: {
    parseBankType() {
        return function(row) {
          return parseConfig(this.bankTypes, String(row.bankType))
        }
    }
  },
  methods: {
    async searchBanks() {
        const { data: res } = await queryBanks(this.queryParams)
        if (res.code === 200) {
            this.banks = res.data.banks.records
            this.total = res.data.banks.total
        }
    },
   callbackSelectTemplate(row) {
    this.$emit('selectBank', row)
   }
  }
}
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>